<script src="../../dist/mini-vue.js"></script>

<!-- item template -->
<script type="text/x-template" id="item-template">
    <li>
    <div
      :class="{bold: isFolder.value}"
      @click="toggle"
      @dblclick="changeType">
      {{model.name}}
      <span v-if="isFolder.value">[{{open.value ? '-' : '+'}}]</span>
    </div>
    <ul v-if="isFolder.value" :style="{display: open.value ? 'block' : 'none'}">
      <tree-item
        class="item"
        v-for="model in model.children"
        :model="model">
      </tree-item>
      <li class="add" @click="addChild">+</li>
    </ul>
  </li>
</script>
<!-- item script -->
<script>
    const { reactive, computed, ref } = MiniVue;

    const TreeItem = {
        template: '#item-template',
        // 只支持数组写法
        props: ['model'],
        setup(props) {
            console.log('***');
            const open = ref(false);
            const isFolder = computed(() => {
                return props.model.children && props.model.children.length;
            });

            function toggle() {
                open.value = !open.value;
            }

            function changeType() {
                if (!isFolder.value) {
                    props.model.children = [];
                    addChild();
                    open.value = true;
                }
            }

            function addChild() {
                props.model.children.push({
                    name: 'new stuff',
                });
            }

            return {
                open,
                isFolder,
                toggle,
                changeType,
                addChild,
            };
        },
    };
</script>

<p>(You can double click on an item to turn it into a folder.)</p>

<!-- the app root element -->
<ul id="demo">
    <tree-item class="item" :model="treeData"></tree-item>
</ul>

<script>
    const treeData = {
        name: 'My Tree',
        children: [
            {
                name: 'hello',
            },
            {
                name: 'wat',
            },
            {
                name: 'child folder',
                children: [
                    {
                        name: 'child folder',
                        children: [
                            {
                                name: 'hello',
                            },
                            {
                                name: 'wat',
                            },
                        ],
                    },
                    {
                        name: 'hello',
                    },
                    {
                        name: 'wat',
                    },
                    {
                        name: 'child folder',
                        children: [
                            {
                                name: 'hello',
                            },
                            {
                                name: 'wat',
                            },
                        ],
                    },
                ],
            },
        ],
    };

    MiniVue.createApp({
        components: {
            TreeItem,
        },
        setup() {
            return {
                treeData,
            };
        },
    }).mount('#demo');
</script>

<style>
    body {
        font-family: Menlo, Consolas, monospace;
        color: #444;
    }

    .item {
        cursor: pointer;
    }

    .bold {
        font-weight: bold;
    }

    ul {
        padding-left: 1em;
        line-height: 1.5em;
        list-style-type: dot;
    }
</style>